<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		@font-face {
			font-family: 'icomoon';
			src: url('fonts/icomoon.eot?tv6ot1');
			src: url('fonts/icomoon.eot?tv6ot1#iefix') format('embedded-opentype'),
				url('fonts/icomoon.ttf?tv6ot1') format('truetype'),
				url('fonts/icomoon.woff?tv6ot1') format('woff'),
				url('fonts/icomoon.svg?tv6ot1#icomoon') format('svg');
			font-weight: normal;
			font-style: normal;
			font-display: block;
		}

		.a,
		.b {
			width: 30px;
			margin: 20px auto;
			font-family: 'icomoon';
			font-size: 30px;
			color: skyblue;
		}
	</style>

</head>

<body>
	<h2>
		字体图标出现的原因：
		精灵图有以下缺点
		<ul>
			<li>图片文件还是比较大</li>
			<li>图片本身放大或缩小会失真</li>
			<li>一旦图片制作完毕想要更换比较复杂</li>
		</ul>
		为了解决精灵图的问题，产生了字体图标
		<br>
		字体图标展示的是图标，本质其实是字体，可以随意更改大小和颜色而不会失真
		字体图标的优点：
		<ol>
			<li>轻量级：一个字体图标比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求</li>
			<li>灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影、透明效果、旋转等</li>
			<li>兼容性：几乎支持所有的浏览器</li>
			<li>注意：字体图标不能替代精灵技术，只是对工作中图标技术的提升和优化</li>
		</ol>

	</h2>
	<h1>如果遇到结构和样式比较简单的图标就用字体图标；如果结构和样式比较复杂就用精灵图</h1>
	<h2>图标字体库http://icomoon.io</h2>
	字体图标的使用方法：
	<ul>
		<li>把下载的字体图标源文件里的fonts文件夹复制到html同级的文件夹里</li>
		<li>把源文件中的style.css里面的引入部分复制粘贴到style标签里</li>
		<li>打开源文件里的demo.html文件选择要引入的字体图标复制相应小方框</li>
		<li>给引入字体图标的标签添加font-family:"icomoon"</li>
	</ul>
	<br>
	<h1>如何导入新的字体图标，只需要上传selection.json即可，重复以前的步骤替换掉原来的源文件即可</h1>
	<br>
	<br>
	<div class="a">
	</div>
	<div class="b"></div>

</body>

</html>